/* 
  当打包构建应用时，JavaScript 包会变得非常大 影响页面加载
  如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
*/

const AddCartSuccess = () => import('@/views/AddCartSuccess')
const AttrsListenersTest = () => import('@/views/Communication/AttrsListenersTest/AttrsListenersTest')

// 路由配置信息
export default [
  // 重定向 
  {
    path: "",
    redirect: "/home",
  },
  {
    name: 'home',
    path: "/home",
    component: () => import('@/views/Home'),
    meta: {
      isShow: true
    }
  }, {
    name: 'Detail',
    path: "/detail/:skuid",
    component: () => import('@/views/Detail'),
    meta: {
      isShow: true
    }
  }, {
    name: 'login',
    path: "/login",
    component: () => import('@/views/Login'),
    meta: {
      isShow: false
    }
  }, {
    name: 'register',
    path: "/register",
    component: () => import('@/views/Register'),
    meta: {
      isShow: false
    }
  }, {
    path: "/search/:keyword?", // 加个问号表示这个参数可传可不传
    component: () => import('@/views/Search'),
    meta: {
      isShow: true
    },
    name: "search",
    // 面试题4：路由组件能不能传递props数据？
    // 布尔值写法:params
    // props: true  // 只能传递params参数
    // 对象写法:额外的给路由组件传递一些props
    // props:{a:1,b:2}
    // 函数写法：可以吧params参数 query参数 通过props传递给路由组件
    // props: ($route) => {
    //   return {
    //     keyword: {
    //       keyword: $route.params.keyword,
    //       k: $route.query.k
    //     }
    //   }
    // }
    // 简写
    props: ($route) => ({
      keyword: $route.params.keyword,
      k: $route.query.k
    })
  }, {
    name: 'AddCartSuccess',
    path: "/addcartsuccess",
    component: AddCartSuccess,
    meta: {
      isShow: true
    }
  }, {
    path: "/shopcart",
    component: import('@/views/ShopCart'),
    meta: {
      isShow: true
    }
  }, {
    path: "/trade",
    component: import('@/views/Trade'),
    meta: {
      isShow: true
    },
    beforeEnter: (to, from, next) => { // 路由独享守卫
      // 去交易页面，必须是从购物车而来
      if (from.path === '/shopcart') {
        next()
      } else {
        // 其他的路由组件而来，停留在当前
        next(false)
      }
    }
  }, {
    path: "/pay",
    component: import('@/views/Pay'),
    meta: {
      isShow: true
    },
    beforeEnter: (to, from, next) => {
      if (from.path === '/trade') {
        next()
      } else {
        next(false)
      }
    }
  }, {
    path: "/paysuccess",
    component: import('@/views/PaySuccess'),
    meta: {
      isShow: true
    }
  }, {
    path: "/center",
    component: import('@/views/Center'),
    meta: {
      isShow: true
    },
    children: [{
        path: '/center',
        redirect: '/center/myorder', // 重定向
      },
      {
        path: 'myorder',
        component: import('@/views/Center/myOrder'),
      },
      {
        path: 'grouporder',
        component: import('@/views/Center/groupOrder'),
      }
    ]
  }, {
    path: "/attrslistenerstest",
    component: AttrsListenersTest,
    meta: {
      isShow: true
    },
  }
]